<!DOCTYPE html>
<html ng-app="ionic">
  <head>
    <script src="../../dist/js/ionic.bundle.js"></script>
    <meta charset="utf-8">
    <title>Input: Select</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="../../dist/css/ionic.css" rel="stylesheet">
    <script src="../../dist/js/ionic.bundle.js"></script>
    <style>
      body {
        position: absolute;;
      }
    </style>
  </head>
  <body>

    <header class="bar bar-header bar-dark">
      <h1 class="title">Input: Select</h1>
    </header>

    <main class="content has-header padding">

      <div class="list">

        <div class="item item-input item-select">
          <div class="input-label">
            Lightsaber
          </div>
          <select>
            <option>Blue</option>
            <option selected>Green</option>
            <option>Red</option>
          </select>
        </div>

        <div class="item item-input item-select">
          <div class="input-label">
            Fighter
          </div>
          <select>
            <option>ARC-170</option>
            <option>A-wing</option>
            <option>Delta-7</option>
            <option>Naboo N-1</option>
            <option>TIE Fighter</option>
            <option selected>X-wing</option>
            <option>Y-wing</option>
          </select>
        </div>

        <div class="item item-input item-select">
          <div class="input-label">
            Droid
          </div>
          <select>
            <option>2-1B</option>
            <option>B1</option>
            <option>C-3PO</option>
            <option>IG-88</option>
            <option>IT-O</option>
            <option selected>R2-D2</option>
          </select>
        </div>

        <div class="item item-input item-select">
          <div class="input-label">
            Planet
          </div>
          <select>
            <option>Alderaan</option>
            <option selected>Dagobah</option>
            <option>Felucia</option>
            <option>Geonosis </option>
            <option>Hoth</option>
            <option>Kamino</option>
            <option>Mygeeto</option>
            <option>Naboo</option>
            <option>Tataouine</option>
            <option>Utapau</option>
            <option>Yavin</option>
          </select>
        </div>
        <div class="item item-input item-select">
          <div class="input-label">
            Jedi - For over a thousand generations, the Jedi Knights were the guardians of peace and justice in the Old Republic.
          </div>
          <select>
            <option>Yoda</option>
            <option>Obi-Wan Kenobi</option>
            <option>Qui-Gon Jinn</option>
            <option>Mace Windu</option>
            <option>Luke Skywalker</option>
          </select>
        </div>
        <div class="item item-input item-select item-light">
          <div class="input-label">
            Sith - Those who have twisted the force to their malevolent purposes
          </div>
          <select>
            <option>Emperor Palpatine</option>
            <option>Darth Vader</option>
            <option>Count Dooku</option>
            <option>Darth Maul</option>
          </select>
        </div>
        <div class="item item-input item-select item-stable">
          <div class="input-label">
            Sith - Those who have twisted the force to their malevolent purposes
          </div>
          <select>
            <option>Emperor Palpatine</option>
            <option>Darth Vader</option>
            <option>Count Dooku</option>
            <option>Darth Maul</option>
          </select>
        </div>
        <div class="item item-input item-select item-positive">
          <div class="input-label">
            Sith - Those who have twisted the force to their malevolent purposes
          </div>
          <select>
            <option>Emperor Palpatine</option>
            <option>Darth Vader</option>
            <option>Count Dooku</option>
            <option>Darth Maul</option>
          </select>
        </div>
        <div class="item item-input item-select item-calm">
          <div class="input-label">
            Sith - Those who have twisted the force to their malevolent purposes
          </div>
          <select>
            <option>Emperor Palpatine</option>
            <option>Darth Vader</option>
            <option>Count Dooku</option>
            <option>Darth Maul</option>
          </select>
        </div>
        <div class="item item-input item-select item-assertive">
          <div class="input-label">
            Sith - Those who have twisted the force to their malevolent purposes
          </div>
          <select>
            <option>Emperor Palpatine</option>
            <option>Darth Vader</option>
            <option>Count Dooku</option>
            <option>Darth Maul</option>
          </select>
        </div>
        <div class="item item-input item-select item-balanced">
          <div class="input-label">
            Sith - Those who have twisted the force to their malevolent purposes
          </div>
          <select>
            <option>Emperor Palpatine</option>
            <option>Darth Vader</option>
            <option>Count Dooku</option>
            <option>Darth Maul</option>
          </select>
        </div>
        <div class="item item-input item-select item-energized">
          <div class="input-label">
            Sith - Those who have twisted the force to their malevolent purposes
          </div>
          <select>
            <option>Emperor Palpatine</option>
            <option>Darth Vader</option>
            <option>Count Dooku</option>
            <option>Darth Maul</option>
          </select>
        </div>
        <div class="item item-input item-select item-royal">
          <div class="input-label">
            Sith - Those who have twisted the force to their malevolent purposes
          </div>
          <select>
            <option>Emperor Palpatine</option>
            <option>Darth Vader</option>
            <option>Count Dooku</option>
            <option>Darth Maul</option>
          </select>
        </div>
        <div class="item item-input item-select item-dark">
          <div class="input-label">
            Sith - Those who have twisted the force to their malevolent purposes
          </div>
          <select>
            <option>Emperor Palpatine</option>
            <option>Darth Vader</option>
            <option>Count Dooku</option>
            <option>Darth Maul</option>
          </select>
        </div>
      </div>

    </main>

  </body>
</html>
